<template>
	<view class="page">
		<!-- <c-nav-bar :title="titleHeader" ></c-nav-bar> -->
		<view class="travel_days">
			<view class="title">
				游玩天数
			</view>
			<view class="travel_days_tag">
				<view class="travel_days_tagItem" v-for="(item, index) in travelDayList" :key="index">
					<view :class="[index==currentTravelDay?'travel_days_selected':'','tag']"
						@click="changeStatus(index)">
						{{item.days}}
					</view>
				</view>
			</view>

		</view>
		<view class="expectation">
			<view class="title">
				行程期待
			</view>
			<view class="expectation_contain">
				<view class="main">
					<view v-for="(item,index) in expectationList" :key="index">
						<image class="bg" mode='aspectFill' :src="item.tagImage">
							<view class="centerText" @click="expectSelect(1,index,item)">
								{{item.name}}
							</view>
							<view class="radio_selected orign" v-if="item.checked">
								√
							</view>
							<view class="radio orign" v-else></view>
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="like">
			<view class="title">
				喜好
			</view>
			<view class="like_contain">
				<view class="main">
					<view v-for="(item,index) in likeList" :key="index">
						<image class="bg" mode='aspectFill' :src="item.tagImage">
							<view class="centerText" @click="expectSelect(2,index,item)">
								{{item.name}}
							</view>
							<view class="radio_selected orign" v-if="item.checked">
								√
							</view>
							<view class="radio orign" v-else>
							</view>
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="stay">
			<view class="title">
				住宿
			</view>
			<view class="stay_contain">
				<view class="main">
					<view v-for="(item,index) in stayList" :key="index">
						<image class="bg" mode='aspectFill' :src="item.tagImage">
							<view class="centerText" @click="expectSelect(3,index,item)">
								{{item.name}}
							</view>
							<view class="radio_selected orign" v-if="item.checked">
								√
							</view>
							<view class="radio orign" v-else>
							</view>
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="tag">
			<u-tag :plain='true' :text="item.name" size="mini" closable :show="close1" @close="colseTag(index)"
				v-for="(item,index) in tagList"></u-tag>
		</view>
		<u-button type="primary" text="智能推荐路线" size="large" shape="circle" @click="goToRecomand()"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// titleHeader:'偏好选择',
				tagList: [],
				close1: true,
				close2: true,
				close3: true,
				radios: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				checkboxs: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				currentStay: '',
				currentlike: '',
				currentExpect: '',
				expectationSelected: false,
				currentTravelDay: 0,
				travelDayList: [{
						checked: true,
						days: '1天'
					},
					{
						checked: false,
						days: '2天'
					},
					{
						checked: false,
						days: '3天'
					}, {
						checked: false,
						days: '4天'
					}, {
						checked: false,
						days: '5天'
					},
				],
				likeList: [],
				expectationList: [],
				stayList: []
			}
		},
		onLoad() {
			this.queryTagsGroupType();
		},
		methods: {
			colseTag(index) {
				const targetDic = this.tagList[index]

				if (targetDic.type == 1) {
					this.expectationList.forEach((e, i) => {
						if (targetDic.id == e.id) {
							this.$set(this.expectationList[i], 'checked', false);
						}
					})

				}
				if (targetDic.type == 2) {
					this.likeList.forEach((e, i) => {
						if (targetDic.id == e.id) {
							this.$set(this.likeList[i], 'checked', false);
						}
					})
				}
				if (targetDic.type == 3) {
					this.stayList.forEach((e, i) => {
						if (targetDic.id == e.id) {
							this.$set(this.stayList[i], 'checked', false);
						}
					})
				}

				this.tagList.splice(index, 1)
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			changeStatus(val) {
				this.currentTravelDay = val
			},
			expectSelect(type, val, item) {
				switch (type) {
					case 1:
						this.expectationList.forEach((e, i) => {
							this.$set(this.expectationList[i], 'checked', false);
						})
						let eidx = this.tagList.findIndex(t => t.id == item.id);
						if (eidx > -1) {
							this.$set(this.expectationList[val], 'checked', true);

						} else {
							this.tagList.forEach((tags, index) => {
								if (tags.type == 1) {
									if (tags.id !== item.id) {
										this.tagList.splice(index, 1)
									}
								}

							})
							this.$set(this.expectationList[val], 'checked', true);
							this.tagList.push({
								name: item.name,
								id: item.id,
								type
							});
						}
						break
					case 2:
						// this.likeList.forEach((e, i) => {
						// 	this.$set(this.likeList[i], 'checked', false);
						// })
						let lidx = this.tagList.findIndex(t => t.id == item.id);
						if (lidx > -1) {
							this.$set(this.likeList[val], 'checked', false);
							this.tagList.forEach((tags, index) => {
								if (tags.type == 2) {
									if (tags.id == item.id) {
										this.tagList.splice(index, 1)
									}
								}

							})
						} else {
							this.$set(this.likeList[val], 'checked', true);
							this.tagList.push({
								name: item.name,
								id: item.id,
								type
							});
						}
						break
					case 3:
						this.stayList.forEach((e, i) => {
							this.$set(this.stayList[i], 'checked', false);
						})
						let tidx = this.tagList.findIndex(t => t.id == item.id);
						if (tidx > -1) {
							this.$set(this.stayList[val], 'checked', true);
							// this.tagList.splice(tidx, 1);
						} else {
							this.tagList.forEach((tags, index) => {
								if (tags.type == 3) {
									if (tags.id !== item.id) {
										this.tagList.splice(index, 1)
									}
								}

							})
							this.$set(this.stayList[val], 'checked', true);
							this.tagList.push({
								name: item.name,
								id: item.id,
								type
							});
						}
						break
				}
			},
			goToRecomand() {
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/routeDetail?item=' + JSON.stringify({
						dayNum: this.currentTravelDay + 1
					})
				})
			},
			queryTagsGroupType() {
				this.$api.post('/api/customrec/queryTagsGroupType').then(res => {
					if (res.data.code === 0) {
						res.data.data.forEach((d, di) => {
							d.tagsList.forEach((t, ti) => {
								t.checked = false;
							})
						})
						let xcqd = res.data.data.find(d => d.type == 1);
						let xh = res.data.data.find(d => d.type == 2);
						let zs = res.data.data.find(d => d.type == 3);
						if (xcqd) this.expectationList = xcqd.tagsList;
						if (xh) this.likeList = xh.tagsList;
						if (zs) this.stayList = zs.tagsList;

					} else this.$showModal(res.data.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 10rpx 24rpx;
		// padding-top: 130rpx;
	}

	/deep/.u-tag__close--mini {
		width: 21px !important;
		height: 21px !important;

	}

	/deep/.u-icon__icon {
		font-size: 15px !important;
		line-height: 16px !important;
	}

	.title {
		width: 128rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #111111;
		margin: 20rpx 0;
	}

	.travel_days {
		&_tag {
			overflow: hidden;

			.travel_days_tagItem {
				float: left;
				width: calc(25% - 26rpx);
				margin: 0 0 20rpx 26rpx;
				height: 64rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #ECECEC;

				&:nth-child(4n+1) {
					margin-left: 0;
				}

				.tag {
					margin: 0 !important;
				}
			}

			.tag,
			{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			align-items: center;
			justify-content: center;
			display: flex;
		}
	}
	}

	.travel_days_selected {
		background: #007A69;
		color: #FFFFFF !important;
	}

	.main {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		position: relative;
	}

	.bg {
		width: 222rpx;
		height: 140rpx;
		border-radius: 8rpx;
		margin-bottom: 16rpx;

	}





	.radio {
		width: 26rpx;
		height: 26rpx;
		border-radius: 13rpx;
		border: #666666 0.5rpx solid;

		&_selected {
			background-color: #188FFE;
			width: 29rpx;
			height: 29rpx;
			border-radius: 21rpx;
			border: #666666 0.5rpx solid;
			color: white;
			line-height: 29rpx;
			text-align: center;
		}
	}

	.orign {
		position: absolute;
		transform: translate(93px, -77px);
	}

	.centerText {
		position: absolute;
		width: 115px;
		height: 72px;
		font-size: 14px;
		line-height: 72px;
		color: #FFFFFF;
		z-index: 1;
		text-align: center;
		transform: translate(0, -107%);

	}

	.tag {
		display: flex;
		flex-direction: row;
		margin: 20rpx;

	}
</style>